<template>
  <div>
      <div class="area">
        <div class="bg">
        <div class="bigTitle">全国疫情风险地区汇总</div>
        <br>
        <div class="smallTitle">数据来源：国务院客户端小程序/各地卫健委通告</div>
          <div class="con">
          <div class="title">全国风险地区汇总</div>
          <!-- 高风险地区 -->
          <template v-if="high.length>0">
            <div class="th">
              <svg t="1658312133183" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3172" width="32" height="32"><path d="M219.52 914.848l-32.832 100.224h651.936l-32.928-100.224H219.52z m102.336 81.664H214.688l20.8-63.104h149.408c-20.992 20.96-42.048 42.048-63.04 63.104zM510.752 309.888a259.808 259.808 0 0 0-259.808 259.808v319.168h523.328v-319.168a259.808 259.808 0 0 0-259.808-259.808h-3.712z m213.408 267.2a22.24 22.24 0 1 1-44.512 0 163.52 163.52 0 0 0-163.328-163.296h-3.68a22.24 22.24 0 0 1 0-44.544h3.68a208.096 208.096 0 0 1 207.84 207.84zM209.152 465.504a42.336 42.336 0 0 0-33.216-49.824l-122.496-24.608a42.4 42.4 0 0 0-50.208 47.872c2.624 17.088 15.584 31.584 33.6 35.168l122.496 24.576a42.368 42.368 0 0 0 49.824-33.184zM181.024 181.6l78.112 97.632c14.592 18.24 41.184 21.248 59.424 6.592a42.24 42.24 0 0 0 6.624-59.488l-78.016-97.6a42.336 42.336 0 0 0-66.144 52.864zM517.952 218.56a42.4 42.4 0 0 0 43.328-41.344l-0.32-124.928a42.304 42.304 0 1 0-84.64-1.984l0.288 124.928a42.304 42.304 0 0 0 41.344 43.328zM713.888 295.104a42.24 42.24 0 0 0 59.712-3.808l82.528-93.824a42.336 42.336 0 0 0-63.52-55.904l-82.56 93.824a42.24 42.24 0 0 0-10.048 34.304c1.408 9.536 6.016 18.56 13.888 25.408zM1021.984 448.192a42.368 42.368 0 0 0-48.256-35.488l-123.488 18.816a42.368 42.368 0 1 0 12.768 83.68l123.456-18.784a42.336 42.336 0 0 0 35.52-48.224z" p-id="3173" fill="#d81e06"></path></svg>
              <span class="write">高风险地区{{high.length}}个</span>
              <li v-for="(item,index) in high" :key="index">{{item}}</li>
            </div>
          </template>



          <!-- 中风险地区 -->
          <template v-if="mid.length>0">
             <div class="mid">
              <svg t="1658312133183" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3172" width="32" height="32"><path d="M219.52 914.848l-32.832 100.224h651.936l-32.928-100.224H219.52z m102.336 81.664H214.688l20.8-63.104h149.408c-20.992 20.96-42.048 42.048-63.04 63.104zM510.752 309.888a259.808 259.808 0 0 0-259.808 259.808v319.168h523.328v-319.168a259.808 259.808 0 0 0-259.808-259.808h-3.712z m213.408 267.2a22.24 22.24 0 1 1-44.512 0 163.52 163.52 0 0 0-163.328-163.296h-3.68a22.24 22.24 0 0 1 0-44.544h3.68a208.096 208.096 0 0 1 207.84 207.84zM209.152 465.504a42.336 42.336 0 0 0-33.216-49.824l-122.496-24.608a42.4 42.4 0 0 0-50.208 47.872c2.624 17.088 15.584 31.584 33.6 35.168l122.496 24.576a42.368 42.368 0 0 0 49.824-33.184zM181.024 181.6l78.112 97.632c14.592 18.24 41.184 21.248 59.424 6.592a42.24 42.24 0 0 0 6.624-59.488l-78.016-97.6a42.336 42.336 0 0 0-66.144 52.864zM517.952 218.56a42.4 42.4 0 0 0 43.328-41.344l-0.32-124.928a42.304 42.304 0 1 0-84.64-1.984l0.288 124.928a42.304 42.304 0 0 0 41.344 43.328zM713.888 295.104a42.24 42.24 0 0 0 59.712-3.808l82.528-93.824a42.336 42.336 0 0 0-63.52-55.904l-82.56 93.824a42.24 42.24 0 0 0-10.048 34.304c1.408 9.536 6.016 18.56 13.888 25.408zM1021.984 448.192a42.368 42.368 0 0 0-48.256-35.488l-123.488 18.816a42.368 42.368 0 1 0 12.768 83.68l123.456-18.784a42.336 42.336 0 0 0 35.52-48.224z" p-id="3173" fill="#f4ea29"></path></svg>
              <span class="write">中风险地区{{mid.length}}个</span>
             <li v-for="(item,index) in mid" :key="index">{{item}}</li>
            </div>
          </template>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import {getCovInfo } from '@/api/index'
  export default {
      data() {
        return {
          high:[],//高风险地区
          mid:[]//中风险地区
        }
      },
      created(){
        this.getRiskArea();
      },
      methods:{
        getRiskArea(){
          getCovInfo().then(res => {
            console.log(res.newslist[0].riskarea);
            this.high = res.newslist[0].riskarea.high,
            this.mid = res.newslist[0].riskarea.mid
          })
          // console.log(this.high);
          // console.log(this.mid);
        }
      }
  }
</script>

<style  scoped>
.bg{
  background: url("~@/assets/1.jpg") no-repeat;
  height: 500px;
  background-size:100% 500px;
  padding-top: 200px;
}
.bigTitle{
  text-align: center;
  font-size: xx-large;
  font-weight: 900;
  color: #666;
}
.title {
  border-left: 10px solid rgb(6, 6, 231);
  padding-left: 10px;
  color: #666;
  font-size: x-large;
  font-weight: 600;
  line-height: 40px
}
.con{
  background-color: snow;
  margin: 0 200px ;
  border-radius: 10px;
  padding: 0.2;
}
.smallTitle{
  text-align: center;
  font-size: large;
  font-weight: 900;
  color: #444;
  height: 100px;
}
.write{
  font-size: 20px;
  font-weight: 700;
  color: #666;
  vertical-align: top;
}
.th li{
  background-color: #e9e9e9;
  margin-top: 5px;
  list-style: none;
  line-height: 40px;
  border-radius: 10px;
  font-size: 18px;
}
.mid li{
  background-color: #e9e9e9;
  margin-top: 10px;
  list-style: none;
  line-height: 40px;
  border-radius: 10px;
  font-size: 18px;
}
</style>
